<template>
  <el-menu
      default-active="1"
      class="tac"
      mode="horizontal"
  >
    <el-menu-item index="1" @click="$toPath('/home')">
      <span>首页</span>
    </el-menu-item>
    <el-menu-item index="2" @click="$toPath('/person')">
      <span>个人中心</span>
    </el-menu-item>
    <el-menu-item index="3" item @click="backLogin">
      <span>退出</span>
    </el-menu-item>
  </el-menu>
</template>

<script setup>
import {Picture as IconPicture,} from '@element-plus/icons-vue'
import {useRouter} from 'vue-router'
import store from '@/store/index'


const router = useRouter()

const backLogin = () => {
  router.push('/login')
  store.commit('setToken', '')
}

</script>


<style scoped lang="less">

.el-menu--horizontal.el-menu {
  border: none;
}

.tac {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 19px;
  font-weight: bold;

  .el-menu-item {
    font-size: 20px;
    height: 45px;

    span {
      margin: 0 8px;
    }
  }

  .el-menu-item.is-active i {
    color: #409eff;
  }

  .el-menu-item:hover {
    background-color: #ffffff;
  }

  .el-menu-item.is-active {
    background-color: #ffffff;
  }

  .el-menu .el-icon {
    color: #409eff;
    font-size: 22px !important;
  }
}

@media screen and (max-width: 720px) {
  .tac {

  }
}


</style>